<template>
    <div>
      <Table ref="table" :columns="columns" stripe border :data="datas"></Table>
      <Button @click="addSelected" type="primary" class="m-t-sm" v-if="isShow">添加选项</Button>
    </div>
</template>

<script>
    export default {
      props:{
        content:{
          type: Array,
          default:[]
        },
        isShow:{
          type:Boolean,
          default:false
        }
      },
        data() {
          let that = this;
            return {
              columns:[
                {
                  title: '正确选项',
                  width: 90,
                  render:(h, params) => {
                    return h('RadioGroup',{
                      props:{
                        value: that.isTrue,
                      },
                      on: {
                        'on-change': (status) => {
                          that.isTrue = status;
                          that.datas.forEach(x => {
                              x.rightFlag = false;
                            if(x.optionName === status) {
                              x.rightFlag = true
                            }
                          })
                        }
                      },
                    },[
                      h('Radio', {
                        props:{
                          label: that.datas[params.index].optionName,
                          value: that.datas[params.index].rightFlag,
                          disabled: !that.isShow
                        },
                        style: {
                          margin: "15px 0px 10px",
                          display: "block"
                        }
                      })

                    ])
                  }
                },
                {
                  title: '答案内容',
                  width: 400,
                  render: (h, params) => {
                    return h('Input', {
                      props: {
                        type:'textarea',
                        value: that.datas[params.index].optionContent,
                        readonly: !that.isShow
                      },
                      on: {
                        input: (val) => {
                          that.datas[params.index].optionContent = val;
                        }
                      }
                    });
                  }
                },
                {
                  title: '操作',
                  width: 100,
                  render: (h, params) => {
                      return h('div', [
                        h(
                          'Button',
                          {
                            props: {type: 'error', size: 'small',disabled: !that.isShow},
                            on: {
                              click() {
                                that.datas.forEach((x,index)=> {
                                  if(x.optionName === params.row.optionName && index === 0&&that.datas.length === 1) {
                                    that.$Message.warning('至少有一条选项')
                                  }
                                  if(x.optionName === params.row.optionName && index !== 0) {
                                    if(x.optionName === that.isTrue) {
                                      that.isTrue = null
                                    }
                                    that.datas.splice(index,1);
                                  }
                                });
                                that.datas.forEach((x,index) => {
                                  if(index > 0){
                                    that.list.forEach((y,indexs) => {
                                      if(index===indexs) {
                                        x.rightFlag = that.list[indexs].optionName === that.isTrue;
                                        x.optionName = that.list[indexs].optionName;
                                      }
                                    })
                                  }
                                })
                              }
                            }
                          },
                          '删除'
                        )
                      ]);
                    }
                },

              ],
              datas:[],
              list:[],
              isTrue:'A'
            }
        },
        watch: {
          content(val,old) {
            this.datas = val;
          }
        },
        created() {
          this._list()
        },
        methods: {
          _list() {
            for(var i=0;i<26;i++){
              this.list.push({
                id:i,
                optionName:String.fromCharCode(65+i)
              })
            }
          },
          addSelected() {
            let obj = {};
            this.list.forEach((x,index) => {
                this.datas.forEach((y,indexs) => {
                  if(y.optionName === x.optionName) {
                    obj.optionName = this.list[index+1].optionName;
                    obj.id = index+1
                  }
                })
            });
            this.datas.push({
              rightFlag:false,
              optionName: obj.optionName,
              optionContent:''
            });
        }
        }
    };
</script>
<style scoped>

</style>
